<!--设置权限-->
<template>
  <el-dialog title="设置权限" width="80%" :visible.sync="dialogProp.visible" :close-on-click-modal="false" @opened="listenOpenedDialog" @closed="listenClosedDialog">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="操作权限" name="1">
        <div class="content-tree">
          <el-tree
            ref="tree"
            :data="permissionData"
            show-checkbox
            node-key="menuId"
            :default-checked-keys="defaultCheckedKeys"
            :props="defaultProps"
            :highlight-current="true"
            accordion
            default-expand-all
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="数据权限" name="2">
        <div class="content-tree">数据权限</div>
      </el-tab-pane>
      <el-tab-pane label="字段权限" name="3">
        <div class="content-tree">字段权限</div>
      </el-tab-pane>
      <el-tab-pane label="成员列表" name="4">
        <div class="content-tree">成员列表</div>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer">
      <el-button @click="dialogProp.visible = false">取消</el-button>
      <el-button type="primary" @click="dialogSubmit()">立即提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryAllMenu, queryAllByRoleId, updateRoleMenus } from '@/api/api'

export default {
  name: 'SetPermission',
  props: {
    // 弹窗属性相关数据(必传)
    dialogProp: {
      type: Object,
      default: null
    },
    // 角色信息(必传)
    roleInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      activeName: '1',
      permissionTypeList: [
        { id: '1', name: '操作权限' }
        // { id: '2', name: '数据权限' },
        // { id: '3', name: '字段权限' },
        // { id: '4', name: '数据权限' }
      ],
      permissionData: null,
      defaultCheckedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }

    }
  },

  mounted() {

  },

  methods: {
    handleClick(tab, event) {

    },
    listenOpenedDialog() {
      this.getTableList()
    },
    listenClosedDialog() {

    },
    getTableList() {
      queryAllMenu({ status: '1' }).then(res => {
        if (res.code === '0000') {
          this.permissionData = res.data
          this.queryAllByRoleId()
        }
      })
    },
    queryAllByRoleId() {
      this.defaultCheckedKeys = []

      queryAllByRoleId({ roleId: this.roleInfo.roleId }).then(res => {
        if (res.code === '0000') {
          if (res.data && res.data.length) {
            const leafIdList = [] // 所有叶子节点id

            filtersId(res.data)
            function filtersId(arr) {
              for (let i = 0; i < arr.length; i++) {
                if (arr[i].children && arr[i].children.length) {
                  filtersId(arr[i].children)
                } else {
                  // 递归查找出所有叶子节点
                  leafIdList.push(arr[i].menuId)
                }
              }
            }

            this.defaultCheckedKeys = leafIdList
          } else {
            this.defaultCheckedKeys = []
          }
        } else {
          this.defaultCheckedKeys = []
        }
      })
    },
    dialogSubmit() {
      const checkedKeys = this.$refs.tree.getCheckedKeys() // 节点选择状态
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys() // 节点半选中状态
      const params = {
        roleId: this.roleInfo.roleId,
        menuIds: [...new Set([...checkedKeys, ...halfCheckedKeys])]
      }

      updateRoleMenus(params).then(res => {
        if (res.code === '0000') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogProp.visible = false
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.content-tree{
  width: 100%;
  height: 500px;
  overflow-y: auto;
}
</style>
